<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-friend"></i> 用户管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>代理申请</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-row style="display:flex;
	flex-flow: nowrap row;
	align-items: center;
	justify-content: center;width:100%;">
          <el-col :span="12">
            <el-select v-model="query.sort"
                       placeholder="选择排序方式">
              <el-option key="1"
                         label="正序"
                         value="1"></el-option>
              <el-option key="2"
                         label="倒序"
                         value="2"></el-option>
            </el-select>
            <el-input v-model="query.mobile"
                      placeholder="手机号码"
                      style="width:200px;margin-left:10px"
                      class="handle-input mr10"></el-input>
            <el-button type="primary"
                       icon="el-icon-search"
                       @click="handleSearch">搜索</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table :data="tableData"
                border
                class="table"
                header-cell-class-name="table-header">
        <el-table-column prop="id"
                         label="ID"
                         width="55"
                         align="center"></el-table-column>
        <el-table-column prop="name"
                         label="姓名"></el-table-column>
        <el-table-column prop="mobile"
                         label="手机号码"></el-table-column>
        <el-table-column label="申请等级"
                         sortable
                         align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.level==1">
              省级
            </span>
            <span v-if="scope.row.level==2">
              市级
            </span>
            <span v-if="scope.row.level==3">
              县级
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="created_at"
                         label="添加时间"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background
                       layout="total, prev, pager, next"
                       :current-page="query.page"
                       :page-size="query.pageSize"
                       :total="pageTotal"
                       @current-change="handlePageChange"></el-pagination>
      </div>
    </div>

  </div>
</template>

<script>

export default {
  name: 'basetable',
  data () {
    return {
      query: {
        mobile: '',
        page: 1,
        pageSize: 10,
        status: '',
        sort: ''
      },

      tableData: [],
      pageTotal: 0,
      form: {},
      //获取列表请求
      getList: function () {
        let that = this;
        this.api.getAgencyApply(this.query, function (data) {
          that.tableData = data.list;
          that.query.page = data.page;
          that.query.pageSize = data.pageSize;
          that.pageTotal = data.pageTotal;
        });
      },

    };
  },
  created () {
    let that = this;
    if (that.tool.GetRequest('mobile') != false) {
      that.query.mobile = that.tool.GetRequest('mobile');
    }
    this.getList();
    try {
      this.$router.push(this.$route.path);
    } catch (error) {

    }

  },
  methods: {
    // 触发搜索按钮
    handleSearch () {

      this.$set(this.query, 'page', 1);
      this.getList();
    },
    // 分页导航
    handlePageChange (val) {
      this.$set(this.query, 'page', val);
      this.getList();
    }
  }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
